<template>
  <el-container style="padding: 20px; max-width: 600px; margin: auto;">
    <el-header>
      <h2>修改帖子</h2>
    </el-header>
    <el-main>
      <el-form :model="post" :rules="rules" ref="postForm" label-width="80px" @submit.prevent="submitForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="post.title" placeholder="请输入标题"></el-input>
        </el-form-item>

        <el-form-item label="内容" prop="content">
          <el-input
              type="textarea"
              :rows="6"
              v-model="post.content"
              placeholder="请输入内容"
          ></el-input>
        </el-form-item>

        <el-form-item label="作者" prop="author">
          <el-input v-model="post.author" placeholder="请输入作者"></el-input>
        </el-form-item>

        <!-- 状态改成下拉 -->
        <el-form-item label="状态" prop="status">
          <el-select v-model="post.status" placeholder="请选择状态">
            <el-option label="未审核" :value="0"></el-option>
            <el-option label="正常" :value="1"></el-option>
            <el-option label="驳回" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <!-- 分类改成下拉 -->
        <el-form-item label="分类" prop="category">
          <el-select v-model="post.category" placeholder="请选择分类">
            <el-option label="公告" :value="0"></el-option>
            <el-option label="帖子" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">立即提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { getPost, update } from '@/api/post';

export default {
  data() {
    return {
      post: {
        title: '',
        content: '',
        author: '',
        status: null,     // 数字类型
        category: null    // 数字类型
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        category: [{ required: true, message: '请选择分类', trigger: 'change' }],
      }
    };
  },
  mounted() {
    this.fetchPost();
  },
  methods: {
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          update(this.post).then(res => {
            if (res.data) {
              this.$message.success('帖子信息更新成功');
              this.$router.push('/post');
            } else {
              this.$message.error('更新帖子信息失败');
            }
          }).catch(error => {
            console.error(error);
            this.$message.error('更新帖子信息失败');
          });
        } else {
          this.$message.warning('请完善表单信息');
        }
      });
    },
    resetForm() {
      this.$refs.postForm.resetFields();
    },
    fetchPost() {
      const postId = this.$route.query.id;
      if (postId) {
        getPost(postId).then(res => {
          if (res.data) {
            // 强制把 category 转为数字
            res.data.category = Number(res.data.category);
            res.data.status = Number(res.data.status);
            this.post = res.data;
          } else {
            this.$message.error('无法获取帖子数据');
          }
        }).catch(error => {
          console.error(error);
          this.$message.error('获取帖子信息失败');
        });
      }
    },
  }
};
</script>
